@(geneId: Option[String])(implicit request: play.api.mvc.RequestHeader)
	@main("Search Macadamia integrifolia HAES 741") {
		<style>
				.form-group {
					margin-top: 20px;
				}

		</style>
		<input type="hidden" id="myGeneId" value="@geneId">
		<div class="row">
			<div style="margin-top: 0px" class="form-group col-sm-12">
				<h2 class="page-heading"
				style="text-align: left;
					border-bottom: 5px solid #e9f3f4">Search Macadamia integrifolia HAES 741</h2>
			</div>
		</div>

		<div class="row">
			<div class="col-sm-3">
				<div class="bs-docs-sidebar" role="complementary">
					<ul class="nav bs-docs-sidenav myMainUl">
						<li class="active"><a href="#keyword" data-toggle="tab">Keyword</a></li>
						<li class=""><a href="#geneId" data-toggle="tab">Gene ID</a></li>
						<li class=""><a href="#geneName" data-toggle="tab">Gene Name</a></li>
						<li class=""><a href="#region" data-toggle="tab">Region</a></li>
					</ul>
				</div>
			</div>

			<div class="col-sm-8 tab-content myform" >

				<div class="tab-pane active" id="keyword">
					<form class="form-horizontal" method="get" id="form">
						<div class="form-group">
							<label class="control-label col-sm-2">Keyword:</label>
							<div class="col-sm-8">
								<input name="keyword" class="form-control" >
							</div>
						</div>
						<div class="form-group">
							<div class="actions col-sm-offset-3 col-sm-3">
								<button type="button" class="btn btn-primary myKeywordSearch" style="width: 90%;" id="search">
									Search</button>
							</div>
						</div>
					</form>
				</div>

				<div class="tab-pane " id="geneId">
					<form class="form-horizontal" method="get" id="form">

						<div class="form-group" style="display: none">
							<label class="control-label col-sm-2">Species:</label>
							<div class="col-sm-10" >
								<div class='radio' id='species'></div>
							</div>
						</div>

						<div class="form-group">
							<label class="control-label col-sm-2">Gene ID:</label>
							<div class="col-sm-8">
								<textarea name="geneId" class="form-control" rows="5"></textarea>
								<span class="help-block">
									e.g.,&nbsp;<a href="javascript:void(0);"><em class="myShowExample" >
									XP_042499423.1,XP_042505296.1,XP_042499728.1</em></a></span>
							</div>
						</div>
						<div class="form-group">
							<div class="actions col-sm-offset-2 col-sm-3">
								<button type="button" class="btn btn-primary myGeneIdSearch" style="width: 90%;" id="search">
									Search</button>
							</div>
						</div>
					</form>
				</div>

				<div class="tab-pane " id="geneName">
					<form class="form-horizontal" action="circInfo" method="get" id="form">

						<div class="form-group" style="display: none">
							<label class="control-label col-sm-2">Species:</label>
							<div class="col-sm-10" >
								<div class='radio' id='species'></div>
							</div>
						</div>

						<div class="form-group">
							<label class="control-label col-sm-2">Gene Name:</label>
							<div class="col-sm-8">
								<textarea name="geneName" id="geneName" class="form-control" rows="5"></textarea>
								<span class="help-block">
									e.g.,&nbsp;<a href="javascript:void(0);"><em class="myShowExample">
									LOC122077530,LOC122081914,LOC122078696</em></a></span>
							</div>
						</div>
						<div class="form-group">
							<div class="actions col-sm-offset-3 col-sm-3">
								<button type="button" class="btn btn-primary myGeneNameSearch" style="width: 90%;" id="search" >
									Search</button>
							</div>
						</div>
					</form>
				</div>

				<div class="tab-pane " id="region" >
					<form class="form-horizontal" method="get" action="circInfoByPositon" id="form">

						<div class="form-group" style="display: none">
							<label class="control-label col-sm-3">Species:</label>
							<div class="col-sm-9" >
								<div class='radio' id='species'></div>
							</div>
						</div>

						<div class="form-group">
							<label class="control-label col-sm-3">Chromosome:</label>
							<div class="col-sm-3">
								<input class="form-control chr" name="chr">
							</div>
							<label class="control-label">e.g., <a href="javascript:void(0);"><em class="myShowExample">
								NC_056557</em></a></label>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-3">Start:</label>
							<div class="col-sm-3">
								<input class="form-control" name="start" id="start">
							</div>
							<label class="control-label">e.g., <a href="javascript:void(0);"><em class="myShowExample">
								166938</em></a></label>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-3">End:</label>
							<div class="col-sm-3">
								<input class="form-control" name="end" id="end">
							</div>
							<label class="control-label">e.g., <a href="javascript:void(0);"><em class="myShowExample">
								272176</em></a></label>
						</div>
						<div class="form-group">
							<div class="actions col-sm-offset-3 col-sm-3">
								<button type="button" class="btn btn-primary myRegionSearch" style="width: 90%;" id="search" >
									Search</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>

		<div id="result" style="display: none">
			<hr>

			<table class="display table table-bordered" id="table" data-pagination="true" data-search="true"
			data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100, all]" data-multiple-search="true"
			style="
				word-wrap: break-word
			"
			>
				<thead>
				</thead>
			</table>
		</div>


		<script>
				$(function () {

					Search.init

				})
		</script>


	}
